<template>
  <div class="homePage">
    <HeaderContent />
    <div class="homePage_content">
      <div class="homePage_content_left">
        <div>
          <img
            class="homePage_content_left_tp"
            src="../../assets/images/homePage/homeTips.png"
          >
        </div>
        <div class="homePage_content_left_content">
          <div
            v-for="(item, index) in leftSource"
            :key="index"
            :style="{
              marginRight: index % 2 === 0 ? '4%' : '0%',
              backgroundImage: 'url(' + item.bgUrl1 + ')',
              backgroundSize: '100% 100%'
            }"
            class="homePage_content_left_content_model"
          >
            <div v-if="item.children" class="homePage_common_content">
              <div
                v-for="(item1, index1) in item.children"
                :key="index1"
                @click="goto(item1)"
              >
                <div
                  v-if="item1.title === '项目库'"
                  class="homePage_left_choose"
                >
                  <div v-if="item1.import.length>200" v-html="item1.import" />
                </div>
                <div
                  v-if="item1.title === '系统设置'"
                  class="homePage_left_choose"
                >
                  <div v-if="item1.import.length>200" v-html="item1.import" />
                </div>
                <div
                  v-if="item1.title.indexOf('汇总分析') !== -1"
                  class="homePage_left_choose"
                >
                  <div v-if="item1.import.length>200" v-html="item1.import" />
                </div>
                <div
                  v-if="item1.title.indexOf('指标录入') !== -1"
                  class="homePage_left_choose"
                >
                  <div v-if="item1.import.length>200" v-html="item1.import" />
                </div>
                <div
                  v-if="item1.title.indexOf('文件库') !== -1"
                  class="homePage_left_choose"
                >
                  <div v-if="item1.import.length>200" v-html="item1.import" />
                </div>
                <div
                  v-if="item1.title.indexOf('任务库') !== -1"
                  class="homePage_left_choose"
                >
                  <div v-if="item1.import.length>200" v-html="item1.import" />
                </div>
                <!-- :class="[index1===0?'homePage_specialBg':'homePage_specialBg1']" -->
              </div>
            </div>
            <div v-else style="text-align:center;margin-top:30px">
              <img
                v-if="index === 1"
                style="width:160px"
                src="../../assets/images/homePage/moreFunction.png"
              >
              <img
                v-if="index === 2"
                style="width:210px"
                src="../../assets/images/homePage/moreFunction2.png"
              >
              <img
                v-if="index === 3"
                style="width:210px"
                src="../../assets/images/homePage/moreFunction1.png"
              >
            </div>
          </div>
        </div>
      </div>
      <div class="homePage_content_right">
        <div
          v-for="(item, index) in rightSource"
          :key="index"
          class="homePage_content_right_model"
        >
          <div class="common_header">
            <div class="title">{{ item.title }}</div>
            <!-- v-if="item.children<6" -->
            <div class="more" @click="gotoMore(item)">查看更多</div>
          </div>
          <div
            v-if="item.children.length !== 0"
            class="homePage_common_content"
          >
            <div
              v-for="(item1, index1) in item.children"
              :key="index1"
              :class="[
                item1.title.length > 8 ? 'homePage_line1' : 'homePage_line2'
              ]"
              :style="{
                backgroundImage: 'url(' + item.bgUrl + ')',
                backgroundSize: '100% 100%'
              }"
              class="choose"
              @click="goto(item1)"
            >
              {{ item1.title }}
            </div>
          </div>
          <div v-else>
            <img
              style="width:200px"
              src="../../assets/images/homePage/noReport.png"
            >
            <div>暂无数据</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import HeaderContent from '@/layout/components/HeaderContent/index.vue';
import { getMenuList } from '@/api/login';
import { previewicon } from '@/api/propertyHomePage/index';
import { getToken } from '@/utils/auth.js';
// import { getToken, setToken } from '@/utils/auth.js';

export default {
  // 注册
  components: {
    HeaderContent
  },
  data() {
    return {
      leftSource: [],
      rightSource: [],
      dataSource: []
    };
  },
  created() {
    getMenuList({
      roleId: getToken('xcRoleId'),
      state: 4,
      url: '',
      appId: getToken('sysitemId'),
      isMeta: true
    }).then(res => {
      if (res.success) {
        this.dataSource = res.data;
        this.leftSource = [{}];
        this.leftSource[0].children = res.data.filter(function(item) {
          return (
            item.title === '项目库' ||
            item.title === '系统设置' ||
            item.title === '汇总分析' ||
            item.title === '指标录入'
          );
        });
        this.leftSource.push({});
        this.leftSource.push({});
        this.leftSource.push({});
        this.leftSource[1].children = res.data.filter(function(item) {
          return item.title === '文件库' || item.title === '任务库';
        });
        this.rightSource = res.data.filter(function(item) {
          return (
            item.title === '报表中心' ||
            item.title === '月报中心' ||
            item.title === '月报汇总'
          );
        });
        this.rightSource.map(o => {
          if (o.title === '报表中心') {
            o.bgUrl = require('@/assets/images/homePage/reportCenter.png');
          } else if (o.title === '月报中心') {
            o.bgUrl = require('@/assets/images/homePage/monthReport.png');
          } else if (o.title === '月报汇总') {
            o.bgUrl = require('@/assets/images/homePage/summaryReport.png');
          }
        });
        this.leftSource.map((item, index) => {
          if (index === 0) {
            item.bgUrl1 = require('@/assets/images/homePage/xmkBg.png');
          } else {
            item.bgUrl1 = require('@/assets/images/homePage/dialogBg.png');
          }
          // if (o.title === '项目库') {
          //   o.bgUrl1 = require('@/assets/images/homePage/xmkBg.png');
          // } else {
          //   o.bgUrl1 = require('@/assets/images/homePage/dialogBg.png');
          // }
        });
        for (let i = 0; i < this.leftSource[0].children.length; i++) {
          previewicon({ fileId: this.leftSource[0].children[i].import }).then(
            res => {
              this.leftSource[0].children[i].import = res
                .replace(
                  /width="+(\w+)+" height="+(\w+)+"/,
                  'width="80px" height="80px"'
                )
                .replace(
                  /linearGradient-1/g,
                  this.leftSource[0].children[i].import
                );
            }
          );
        }
        for (let i = 0; i < this.leftSource[1].children.length; i++) {
          previewicon({ fileId: this.leftSource[1].children[i].import }).then(
            res => {
              this.leftSource[1].children[i].import = res
                .replace(
                  /width="+(\w+)+" height="+(\w+)+"/,
                  'width="80px" height="80px"'
                )
                .replace(
                  /linearGradient-1/g,
                  this.leftSource[1].children[i].import
                );
            }
          );
        }
      } else {
        this.rightSource = [];
        this.dataSource = [];
      }
    });
  },
  methods: {
    gotoMore(item) {
      this.$router.push(item.redirect);
    },
    goto(item) {
      if (item.thirdWebsite !== '' && item.thirdWebsite) {
        const src = item.thirdWebsite;
        window.open(src);
      } else {
        localStorage.setItem('tableTitle', item.title);
        localStorage.setItem('fileType', item.fileType);
        localStorage.setItem('isShowTips', 'true');
        // 设置是否显示头部和左侧的侧边栏
        if (item.title !== '汇总分析') {
          const params = {
            path: item.path,
            query: {
              isShow: true,
              title: item.meta.title,
              menuId: item.id,
              flag: 1,
              isHideLeft: item.isHideLeft,
              isHideTop: item.isHideTop

            }
          };
          if (item.isTargetNew + '' === '0') {
            this.$router.push(params);
          } else {
            const routeUrl = this.$router.resolve(params);
            const tempwindow = window.open('_blank'); // 先打开页面
            tempwindow.location = routeUrl.href; // 后更改页面地址
          }
        } else {
          this.$router.push({
            path: '/largeScreenAnalysis'
          });
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.homePage {
  background: #f0f2f5;
}
.homePage_content {
  display: flex;
  .homePage_content_left {
    flex: 3;
    padding: 10px;
    .homePage_content_left_tp {
      width: 100%;
      height: 220px;
    }
    .homePage_content_left_content {
      height: calc(61vh);
      display: flex;
      flex-flow: wrap;
      padding: 10px;
      .homePage_content_left_content_model {
        width: 48%;
        height: calc(30vh);
        margin-bottom: calc(1vh);
        border-radius: 8px;
        padding: 10px;
        .leftIcon {
          width: 80px;
          height: 80px;
          opacity: 1;
          background: linear-gradient(135deg, #4ba7fd, #1890ff);
          border-radius: 24px;
        }
      }
    }
  }
  .homePage_content_right {
    flex: 1.5;
    padding: 10px;
    padding-top: 15px;
    .homePage_content_right_model {
      height: calc(27vh);
      opacity: 1;
      background: #dcf4ff;
      border-radius: 8px;
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
      margin-bottom: calc(2.5vh);
      padding: 5px 5px;
      text-align: center;
      overflow-y: auto;
    }
  }
  .common_header {
    display: flex;
    padding: 0px 10px;
    .title {
      font-size: 17px;
      font-family: PingFangSC, PingFangSC-Semibold;
      font-weight: 600;
      text-align: left;
      color: rgba(0, 0, 0, 0.65);
      line-height: 33px;
      flex: 1;
    }
    .more {
      flex: 1;
      text-align: right;
      font-size: 15px;
      font-family: PingFangSC, PingFangSC-Semibold;
      font-weight: 600;
      color: #1890ff;
      line-height: 30px;
      cursor: pointer;
    }
    .more:hover {
      text-decoration: underline;
    }
  }
  .homePage_common_content {
    display: flex;
    flex-flow: wrap;
    margin-top: 10px;
    padding-left: 18px;
    .choose {
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      padding: 5px;
      height: 65px;
      margin-right: 15px;
      width: 28%;
      opacity: 1;
      color: #fff;
      border-radius: 9px;
      margin-bottom: 15px;
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: left;
    }
    .choose:hover {
      cursor: pointer;
      box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.15);
      opacity: 0.9;
      // text-decoration: underline
    }
  }
}
.homePage_specialBg {
  background: url("../../assets/images/homePage/xmk.png");
}
.homePage_specialBg1 {
  background: url("../../assets/images/homePage/xtsz.png");
}
.homePage_specialBg2 {
  background: url("../../assets/images/homePage/hzfz.png");
}
.homePage_specialBg3 {
  background: url("../../assets/images/homePage/zblr.png");
}
.homePage_specialBg4 {
  background: url("../../assets/images/homePage/file.png");
}
.homePage_specialBg5 {
  background: url("../../assets/images/homePage/task.png");
}
.homePage_left_choose {
  width: 80px;
  height: 80px;
  opacity: 1;

  background-size: 100% 100%;
  border-radius: 18px;
  margin: 5px 10px;
}
.homePage_left_choose:hover {
  cursor: pointer;
  box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.15);
  opacity: 0.9;
}
.homePage_line1 {
  line-height: 30px;
}
.homePage_line2 {
  line-height: 55px;
}
</style>
